<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: #f00;
            /* 背景图片 */
            /* background-image:url(图片所在的路径); */
            background-image: url(../images/gotoway_03.jpg);
            /* repeat 背景重复 */
            background-repeat: no-repeat;

            /* 沿着x轴或者y轴进行平铺  repeat-x   repeat-y */
            /* background-repeat: repeat-y; */

            /* position 位置 可以精确的设置背景图的位置   第一个值是距离水平方向的    第二个值表示距离垂直方向的 */
            /* background-position: 30px 100px; */

            background-position: center center;

            /* background-position: center bottom; */
        }

        .c {
            width: 1100px;
            height: 417px;
            margin: auto;
            background-color: #f00;
            /* background-image: url(../images/gotoway_02.jpg); */
        }
    </style>
</head>

<body>

    背景图和直接插入图片的区别
        背景图是不占位置的 ---- 文字可以直接在上面显示
        插入的图片是一个内容 ---- 需要占位置的 ---- 文字是不能再上面显示的


        背景图谁在盒子中显示的 盒子小，图大的时候，图会被裁切
        直接插入图片的时候 默认是不会被裁切的

        背景图是写在css当中的    一般不会改变的图写背景图
        直接插入图是写在html中的   一般会经常改变的图写直接插入的方式


    css背景图其实有预加载的作用


    前端写css 
    后端写数据   一般认为后端是不会css的


    <div class="a">
        <img src="../images/gotoway_03.jpg" alt="">
    </div>

    <div class="c">
        <img src="../images/xxx.jpg" alt="">
    </div>





</body>

</html>